/*
 * @Description: 选择车票日期组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:39:13
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-28 22:04:41
 */
<template>
  <div class="choose_time_main">
    <list-state
      :stateOption="stateOption"
      @toRequest="toRequest"
    ></list-state>
    <div class="time fontsize32">{{time}}</div>
    <div class="choose_time_area">
      <div class="choose_time_scroll flex-h">
        <time-block
          v-for="(time, index) in timeList"
          :key="index"
          :time="time"
          @click.native="getThisTimeData(index, direction)"
          :selected="chooseIndex === index"
        ></time-block>
      </div>
    </div>
    <choose-ticket ref="chooseTicket"></choose-ticket>
  </div>

</template>

<script>
import { getRouteDetail } from './../../interface/getInterface'
export default {
  props: {
    typeIndex: {
      type: Number,
      default: -1
    },
    direction: {// 线路方向：1、上行；2、下行
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      stateOption: { // 遮罩层配置
        index: 0,
        mask: false
      },
      chooseIndex: -1, // 选中日期下标
      time: '', // 当前所属月份
      timeList: [], // 日期数据
      requestType: 0, // 判断接口请求失败时重试方法是哪一个
      seatCount: 0
    }
  },
  mounted() {
    // this.getThisTimeData(0)
  },
  methods: {
    toRequest() { // 重新请求方法，暂时模拟
      switch (this.requestType) {
        case 1:
          this.getThisTimeData(this.chooseIndex)
          break
        case 2:
          this.$emit('toRequest')
      }
    },
    getThisTimeData(index, direction) { // 获取当天车票数据
      if (this.chooseIndex !== index || this.requestType > 0) {
        let route = JSON.parse(window.localStorage.getItem('route'))
        this.stateOption.mask = true
        this.stateOption.index = 0
        this.chooseIndex = index
        this.time = this.timeList[index].DATE_DESC // 获取当前选中日期的月份
        let params = {
          DATE: this.timeList[index].DATE,
          DIRECTION: direction || route.DIRECTION_LIST[0],
          PAGE_CAPACITY: 0,
          PAGE_INDEX: 0,
          ROUTE_ID: route.ROUTE_ID,
          TICKET_DATE_TYPE: this.typeIndex + 1
        }
        this.$emit('getTicketDate', this.timeList[index].DATE)
        getRouteDetail(params).then(data => {
          this.$refs.chooseTicket.ticketIndex = -1
          this.$refs.chooseTicket.ticketDateType = this.typeIndex + 1
          this.$refs.chooseTicket.ticketList = data.LIST
          // if (data.LIST[0]) {
          //   window.localStorage.setItem('ticket', JSON.stringify(data.LIST[0]))
          // } else {
          //   window.localStorage.removeItem('ticket')
          // }
          window.localStorage.removeItem('ticket')
          this.chooseIndex = index
          this.stateOption.mask = false
        }).catch(err => {
          console.log(err)
          this.stateOption.mask = true
          this.stateOption.index = 1
          this.requestType = 1
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.choose_time_main {
  position: relative;
  .choose_time_area {
    width: 686px;
    position: relative;
    margin: auto;
    overflow-x: auto;
    padding: 10px 0;
    padding-left: 10px;
    .choose_time_scroll {
      width: fit-content;
      flex-wrap: nowrap;
    }
  }
  .time {
    height: 100px;
    line-height: 100px;
    margin-left: 36px;
    color: #333;
  }
}
</style>
